// 获取元素 
// 拿到三个按钮
// 先给他们挨个绑定点击事件
// 还要知道到底点的那个按钮
// 让对应的盒子显示  

// 三个盒子 

window.onload = function(){
    var divele = document.getElementById('cen_right_top');
    var btnele = [...divele.getElementsByTagName('h3')]; //伪数组
    var boxele = [...divele.getElementsByTagName('div')];

    // btnele.forEach(function(item,index){
    //     // item是一个个的按钮
    //     item.onclick = function(){

    //         // 移除所有的高亮
    //         //隐藏所有的盒子 
    //         btnele.forEach(function(item,index){
    //             btnele[index].classList.remove('active');
    //             boxele[index].style.display = 'none';
    //         });

    //         // 然后点击谁谁高亮  盒子显示
    //         btnele[index].classList.add('active');
    //         boxele[index].style.display = 'block';
    //     }
    // });

    for(var i=0;i<btnele.length;i++){
        // 每次循环 给每个按钮编号
        btnele[i].dataset.id = i;  // 第一次给第一个按钮编号 0 
        // 第二次给第二个按钮编号 1
        // 第三次给第三个按钮编号 2
        btnele[i].onclick = function(){
            // alert(i);
            // alert(this.dataset.id);

            for(var j=0;j<btnele.length;j++){
                btnele[j].classList.remove('active');
                boxele[j].style.display = 'none';
            }

            btnele[this.dataset.id].classList.add('active');
            boxele[this.dataset.id].style.display = 'block';


        }
    }
}


